$default_theme : #0f172a;
*{
  padding: 0;
  margin: 0;
}
body{
   background-color:  $default_theme;
}

main{
   width: 100vm;
   height: 90vh;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   
   //动画1
   .ani_first{
         width: 100px;
         height: 100px;
         background-color: #2980b9;
         box-shadow: 0;
         animation: ani_f 3s infinite;
         
         @keyframes ani_f{
              25%{
                 transform: scale(2);
                 background-color: #3cb1ff;
              }
              50%{
                transform: scale(1);
                background-color: #2980b9;
                box-shadow: none;
              }
              70%{box-shadow: 0px 0px 15px 3px #58a2c2;}
              100%{box-shadow:none}
         }
         
   }
   

  
   //动画2
   .ani_second{
      width: 100px;
      height: 100px;
      border: 1px solid #888;
      
       span{ 
        display:block; 
        width: 20px;
        height: 20px; 
        background-color: #2980b9;
        animation: ani_s 3s infinite;
      }
      
      @keyframes ani_s{
        25%{transform: translateX(73px);width:22px;height: 2px;}
        27%{transform: translateX(99px);width: 2px; height: 2px;}
        29%{transform: translateX(99px);height: 22px;width: 2px;}
        50%{transform: translate(98px,78px);height: 22px;width: 2px;}
        52%{transform: translate(98px,98px);width: 2px; height: 2px;}
        75%{transform: translateY(98px);width: 22px;height: 2px;}
        77%{transform: translateY(78px);width: 2px;height: 22px;}
        100%{ width:2px; height:8px;}
      }
   }
   
   
   
   //动画3
   .ani_third_box{
     width: 100px;
     height: 100px;
     border: 1px solid #34495e;
     box-sizing: border-box;
     
     .ani_third{
         width: 100%;
         height: 100%;
         background-color: #34495e;
         transform: scale(0);
         animation: ani_t 6s infinite;
         display: flex;
         justify-content: center;
         align-items: center;
         
         &::after{
            content: 'new-king';
            font-size: 12px;
            color: white;
            opacity: 0;
            animation: opacity 6s infinite;
         }
         
         @keyframes opacity {
           30%{
             opacity: 0;
           }
           80%{
             opacity: 1;
           }
           to{
             opacity: 1;
           }
         
         }
         
     }
     
     @keyframes ani_t{
        7%{
           transform: scale(0.3);
           background-color: #2ecc71;
           border-radius: 50%;
        }
        14%{
           transform: scale(0.8) rotate(360deg);
           background-color: #e67e22;
           border-radius: 0%;
        }
        21%{
           transform: scale(0.5);
           background-color: #74d3ff;
           border-radius: 50%;
        }
        28%{
          transform: scale(1);
          background-color: #1abc9c;
          border-radius: 0%;
        }
        100%{
          transform: scale(1);
          background-color: #1abc9c;
          border-radius: 0%;
        }
      
        
     }
     
   }

   
   
   
   
   
   
  
}


